<template>
  <el-container id="app">
    <el-header class="header"
      v-show="$route.path != '/login' && !$route.path.match('/check/share') && !$route.path.match('/file/share') && !$route.path.match('/404')">
      <NavTop></NavTop>
    </el-header>
    <el-container class="container-main">
      <el-aside class="aside" width="280px"
        v-show="$route.path != '/login' && !$route.path.match('/check/share') && !$route.path.match('/file/share') && !$route.path.match('/user') && !$route.path.match('/404')">
        <NavAside></NavAside>
      </el-aside>
      <el-main class="main-content"
        :class="[$route.path == '/login' || $route.path.match('/check/share') || $route.path.match('/file/share') || $route.path.match('/user') || $route.path.match('/404') ? 'only-page' : '']">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script scoped>
import NavTop from '@/components/nav-top'
import NavAside from "@/components/nav-aside"
export default {
  name: 'App',
  components: {
    NavTop,
    NavAside
  },
}
</script>

<style>
* {
  padding: 0;
  margin: 0;
}

.container-main {
  height: calc(100% - 56px);
  width: 100%;
}

.header {
  box-shadow: -7px 3px 10px 0 rgba(0, 0, 0, .06);
  height: 56px !important;
}

.aside {
  height: 100%;
}

.main-content {
  width: calc(100% - 280px);
}

.only-page {
  padding: 0 !important;
}</style>
